<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../../js/vue.js"></script>
		<title>02天气案例_监视属性</title>
	</head>
	<body>
		<!-- 
		  监视属性watch:
		  1.当被监视的属性变化时,回调函数(handler)自动调用,进行相关操作
		  2.监视的属性必须存在,才能进行监视!!
		  3.监视的两种写法:
				(1).new Vue时传入watch配置
				(2).通过vm.$watch监视 
		    -->
		<div id="root">
			<h3>今天天气很{{info}}</h3>
			<button @click="changeWeather">切换天气</button>
		</div>
		<script>
			const vm = new Vue({
				el: '#root',
				data: function() {
					return {
						isHot: true,
						window: window
					}
				},
				methods: {
					changeWeather() {
						this.isHot = !this.isHot;
					}
				},
				computed: {
					info() {
						return this.isHot ? '炎热' : '凉爽';
					}
				},
				watch: {
					//监视data中的属性
					/* isHot: {
						immediate: true, //初始化时使handler(newValue,oldValue)调用一下
						//handler什么时候调用？当isHot发生改变时
						handler(newValue, oldValue) {
							console.log('oldValue', oldValue);
							console.log('newValue', newValue);
							console.log('isHot被修改了');
						}
					} */

					//监视计算属性
					info: {
						immediate: false, //初始化时使handler(newValue,oldValue)调用一下
						handler(newValue, oldValue) {
							console.log('oldValue', oldValue);
							console.log('newValue', newValue);
							console.log('info执行了');
						}
					}
				}
			});

			/* vm.$watch('info', {
				immediate: false, //初始化时使handler(newValue,oldValue)调用一下
				handler(newValue, oldValue) {
					console.log('oldValue', oldValue);
					console.log('newValue', newValue);
					console.log('info执行了');
				}
			}) */
		</script>
	</body>
</html>